<template>
	<view class="container">
		
		<view class="carousel-container">
			<swiper class="carousel" current="0" circular="true" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.banner_image" mode="widthFix"/></swiper-item>
			</swiper>
		</view>
		
		<view class="myalledu">
			<text>
				我的参与额度：{{myedu}}
			</text>
		</view>
		<view @tap="help" style="position: fixed;right:40rpx ;display: flex;top: 430rpx;flex-direction: column;align-items: center;background: white;border-radius: 50%;
		width: 120rpx;height: 120rpx;">
			<text class="wlIcon-bangzhu3 wanl-text-red" style="font-size: 28px;"></text>
			<text >帮助</text>
		</view>
		<!-- 店铺商品 -->
		<view class="product-list">
				<view class="goods-list-A">
					<view v-for="(item, index) in blindbox_list" :key="index" class="goods-item" >
						<view class="image-wrapper"><image :src="item.img" mode="widthFix"></view>
						<view class="introduce-box">
							
							<view  class="other-info">
								<text class="title_h">{{ item.name }}({{ item.number }})</text>
								
								
							</view>
							<view class="price-box">
								<view class="price-box-content">
									<text class="price">参与金额:{{ item.min_money }}~{{ item.max_money }} </text>
									<text class="start_time">开始时间:{{ item.start_time }} </text>
									<text class="end_time">结束时间:{{ item.end_time }} </text>
								</view>
								<!-- <text class="sold-tip">库存 {{ item.kucun }}</text> -->
							</view>
						</view>
						<view class="buttom">
							<button v-if="item.start==1" @click="disshows(item.id)">抢购</button>
							<button v-if="item.start==0" class="yellow">暂未开始</button>
							<button v-if="item.start==2" class="black">已抢完</button>
							<button v-if="item.start==3"  class="black">已结束</button>
						</view>
				</view>
			</view>
		</view>
		<view class="dix" v-show="disshow"@click="dixhidden">
			
		</view>
		<view class="button-box"  v-show="disshow">
			<view class="button-box-content">
				<view  class="button-box-title">
					<text class="button-box-title-text">
						参与
					</text>
					<text class="button-box-title-clone" @click="dixhidden">
						关闭
					</text>
				</view>
				<view class="button-box-msg">
					<text>
						本轮剩余:{{sy_money}}
					</text>
					<text>
						可参与:{{zedu}}
					</text>
				</view>
				<view class="button-box-title-form">
					<input type="number" v-model="number"   placeholder="请输入参与金额">
					<text>
						提示：
					</text>
					<text>
						1、参与金额不能大于最大金额
					</text>
					<text>
						2、参与金额为整数
					</text>
					<button @click="addblind">
						确定
					</button>
				</view>
				
			</view>
		</view>
	</view>
</template>
<script>
import { mapState } from 'vuex';

export default {
	
	data() {
		return {
			carouselList: [{ src: '' }],
			blindbox_list: [],
			disshow:false,
			zedu:0,
			sy_money:0,
			showpwd: false,
			number:'',
			blindbox_list_id:'',
			myedu:0
		};
	},
	async onLoad() {
		
	},
	
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '/pages/user/blindbox/list'
		});
	},
	onShow() {
		this.loadData();
	},
	methods: {
		addblind(){
			this.number=Number(this.number)
			if (!this.number || this.number == 0||this.number<1) {
				uni.showModal({
				    content: "请输入金额 ",
				    showCancel: false
				})
				return;
			}
			if(this.number>this.sy_money){
				uni.showModal({
				    content: "福卡剩余金额不足 ",
				    showCancel: false
				})
				return;
			}
			if(this.number>this.zedu){
				uni.showModal({
				    content: "可参与额度不足 ",
				    showCancel: false
				})
				return;
			}
			this.$api.post({
				url: '/wanlshop/blindbox/addorde',
				data: {
					'blindbox_list_id':this.blindbox_list_id,
					'number':this.number
				},
				success: res => {
					uni.showModal({
					    content: res.msg,
					    showCancel: false
					})
					this.disshow=false
				}
			});
		},
		correctpwdinput(){
					
		},
		hidepwdvertify() {
			this.showpwd = false;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		help() {
			this.$wanlshop.to('/pages/user/blindbox/help');
		},
		dixhidden(){
			this.disshow=false
		},
		disshows(blindbox_list_id){
			this.blindbox_list_id=blindbox_list_id
			// console.log(blindbox_list_id);
			this.$api.post({
				url: '/wanlshop/blindbox/changenumber',
				data: {
					'blindbox_list_id':blindbox_list_id,
				},
				success: res => {
						this.zedu=Number(res.number)
						// console.log(this.zedu);
						this.sy_money=Number(res.sy_money)
						this.disshow=true
					
				}
			});
			
			
		},
		async loadData() {
			this.$api.post({
				url: '/wanlshop/blindbox/banner',
				success: res => {
					this.carouselList = res		}
			});
			this.$api.post({
				url: '/wanlshop/blindbox/myedu',
				success: res => {
					this.myedu = res.number
				}
			});

			this.$api.post({
				url: '/wanlshop/blindbox/blindbox_list',
				success: res => {
					this.blindbox_list = res;
					// console.log(this.blindbox_list);
				}
			});			
			
		},
		
		
		navTo(url) {
			if(!url) {
				//this.$api.msg('敬请期待')
			} else {
				if(!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		},
	},
	
};
</script>

<style lang="scss">
page {
	background: linear-gradient(to bottom, #e0e9f8 ,#f5f6fa);
}
.myalledu{
	margin:0 40rpx;
	margin-bottom: 28rpx;
}
.dix{
	width: 100%;
	height: 100vh;
	background: #ccc;
	opacity: 0.5;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
.button-box{
	width: 100%;
	position: fixed;
	bottom: 15%;
	left: 0;
	z-index: 2;
	height: 550rpx;
	background-color: white;
	border-radius: 20rpx 20rpx 0 0;
	.button-box-content{
		width: 90%;
		margin: 0 auto;
		.button-box-title{
			width: 100%;
			border-bottom: 1px solid #ccc;
			.button-box-title-text{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				display: block;
				font-size: 28rpx;
			}
			.button-box-title-clone{
				position: absolute;
				right: 5%;
				top: 20rpx;
			}
		}
		
		.button-box-msg{
			margin-top: 20rpx;
			width: 100%;
			
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: red;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			height: 80rpx;
			line-height: 80rpx;
		}
		.button-box-title-form{
			width: 100%;
			padding: 20rpx 0;
			input{
				width: 80%;
				margin: 20rpx auto;
				border: 1px solid #ccc;
				border-radius: 10rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding-left:20rpx ;
				font-size: 28rpx;
				
			}
			button{
				width: 80%;
				margin: 0 auto;
				border-radius: 10rpx;
				background: red;
				color: white;
				position: absolute;
				bottom: 30rpx;
				left: 10%;
				font-size: 28rpx;
			}
			text{
				width: 80%;
				display: block;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				color: red;
				margin-left: 10%;
				
			}
		}
	}
}
.goods-list-A {
	width: 100%;
	display: flex;
	    flex-wrap: nowrap;
	    flex-direction: column;
	.goods-item {
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		width: 100%;
		 margin:10rpx 0;
		padding: 10rpx 20rpx;
		background: #fff;
		align-items: center;
		
		// box-shadow: 2rpx 2rpx 15rpx #c3c3c3;
		
		
		.image-wrapper {
			width: 23%;
			// height: 280upx;
			// padding:0 20rpx;
			// background: #ffffff;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.price2{
			text-decoration:line-through;
			color:#ccc;
			font-size: 28rpx;
		}
		.introduce-box {
			width: 60%;
			display: flex;
			flex-direction: column;
			// margin-top: 20rpx;
			padding-left: 20upx;
			padding-right: 20upx;
			// flex: 1;
			.title {
				font-size: $font-base;
				color: $font-color-dark;
				height: 85rpx;
				line-height: 40rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				// flex: 1;
			}
			.points-box {
				display: flex;
				align-items: center;
				// height: 45rpx;
				.icon {
					display: flex;
					align-items: center;
					width: 70upx;
					height: 30upx;
					border: 1px solid $uni-color-primary;
					border-radius: 4upx;
					position: relative;
					overflow: hidden;
					font-size: 22upx;
					color: $uni-color-primary;
					&:after {
						content: '';
						width: 50upx;
						height: 50upx;
						border-radius: 50%;
						left: -20upx;
						top: -12upx;
						position: absolute;
						background: $uni-color-primary;
					}
					.icon-xingxing {
						position: relative;
						z-index: 1;
						font-size: 24upx;
						margin-left: 2upx;
						margin-right: 10upx;
						color: #fff;
						line-height: 1;
					}
				}
				.tit {
					font-size: $font-base;
					margin-left: 10upx;
				}
			}
			.price-box {
				
				color: $font-color-light;
				// height: 45rpx;
				
				.price-box-content {
					width: 100%;
					.price {
						width: 100%;
						font-size: 26upx;
						color: $uni-color-primary;
						display: block;
						
					}
					.start_time{
						width: 100%;
						font-size: 26upx;
						color: $uni-color-primary;
						display: block;
					}
					.end_time{
						width: 100%;
						font-size: 26upx;
						color: black;
						display: block;
					}
				}
				.sold-tip {
					font-size: 24upx;
					flex: 1;
					text-align: right;
				}
			}
		}
		.buttom{
			width:15%;
			margin-right: 2%;
			button{
				width: 120rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				background: red;
				color: white;
			}
			.yellow{
				background-color: #fa5d26;
				padding: 0;
			}
			.black{
				background-color: #ccc;
				padding: 0;
			}
		}
	}
}
.scroll-h {
	width: 750upx;
	height: 80upx;
	flex-direction: row;
	white-space: nowrap;
}
.scroll-bigCategory {
	width: 750upx;
	 height: 80upx;
	flex-direction: row;
	white-space: nowrap;
	position: relative;
}
.uni-bigtab-item-title-active {
	color: $base-color;
}
/* 头部 轮播图 */
.carousel-section {
	position: relative;
	padding-top: 0px;
	.titleNview-placing {
		height: var(--status-bar-height);
		//padding-top: 44px;
		box-sizing: content-box;
	}
	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 400rpx;
		transition: 0.4s;
		background: url(https://zyapi.njkw668.com/static/temp/top.png);
		background-size: 100% 500rpx;
		background-repeat: no-repeat;
	}
}
.carousel-container {
	position: relative;
	// background-color: #eaecf9;
	border-radius:0 0 18rpx 18rpx;
	padding: 20upx;
	height: 300rpx;
	margin-bottom: 100rpx;
}
.carousel {
	height: 339rpx;
	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 100%;
			height: 339rpx;
			border-radius: 10rpx;
		}
	}
}

.product-list {
	margin:0 20upx;
	.s-header {
		display: flex;
		align-items: center;
		height: 92upx;
		line-height: 1;
		background-color: #ffffff;
		.s-img {
			width: 140upx;
			height: 30upx;
		}
	}
}
</style>
